<style lang="scss">
.meta_table{
.el-table .el-table__cell {
    padding: 0;
}

.el-table .el-table__cell .cell {
    padding: 0;
}


.el-input.is-disabled .el-input__inner {
    color: black;
    cursor: text;
    border: none;
}

.el-input.is-disabled .el-input__wrapper {
    cursor: text;
    background-color: #0000;
    box-shadow: none;
}

.el-input .is-focus {
    background-color: #fff;
}

.el-input__wrapper {
    background-color: #0000;
    padding: 1px 11px;
    box-shadow: none;
}
}
</style>
<template>
    <el-page-header content="detail" @back="" />

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="">
        <el-tab-pane label="选项/元数据" name="1">
    <el-checkbox-group v-model="type" class="fv">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
      <div class="meta_table">
            <el-table :data="tableData" style="width: 100%" border >
                <el-table-column prop="name" label="Name" width="120" style="padding:0">
                    <template v-slot="scope">
                        <div class="s_cell">
                            <el-input style="width: 100%;height:100%" disabled
                                v-model="scope.row[scope.column.property]">
                            </el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="Type" width="100">
                    <template v-slot="scope">
                        <div class="s_cell">
                            <el-select v-model="scope.row[scope.column.property]" filterable>
                                <el-option v-for="i in 4" :key="i" :lable="i" :value="i"></el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="value" label="State">
                    <template v-slot="scope">
                        <div class="s_cell">
                            <el-input style="width: 100%;height:100%" v-model="scope.row[scope.column.property]">
                            </el-input>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
</div>
        </el-tab-pane>
        <el-tab-pane label="界面" name="2">
            <div class="fh" style="justify-content: start;">
                <div style="max-width: 50%;">
                    <codemirror ref="tr" v-model="code" placeholder="Code gose here..." :style="{height: '400px'}"
                        :autofocus="true" :indent-with-tab="true" :tabSize="2" :extensions="extensions"
                        @ready="handleReady" @change="handleChange" @focus="" @blur="" :selection="selection" />
                </div>
                <div style="max-width: 50%;" v-html="codeHTML">

                </div>
            </div>
        </el-tab-pane>
    </el-tabs>

</template>

<script setup lang="ts">
import {Codemirror} from "vue-codemirror";
import {EditorView, basicSetup} from "codemirror"
import {html} from "@codemirror/lang-html";
import {oneDark} from "@codemirror/theme-one-dark";

import {ref} from "vue";
import type {EditorState} from "@codemirror/state";
let code = $ref(``);
let activeName = $ref('2')
let state = $ref<EditorState>()
const tableData = $ref([
    {
        name: 'd1',
        type: "eee",
        value: 123,
    },]
)
const type = $ref([])
code = localStorage.getItem("code") || `<div></div>`
const handleChange = (str: string) => {
    localStorage.setItem("code", str);
}
const handleReady = (e: any) => {
    state = e.state
}
let selection = $ref({
    anchor: 1, head: 1
})
let postData = $computed(() => {
    let data = {} as any
    tableData.map((k, v) => {
        data[k.name] = k.value
    })
    return data
})

const codeHTML = $computed(() => {
    let str = code
    str = str.replace(/\{\{(.+?)\}\}/g, (_: string, v) => {
        v = v.replace(/^\s+|\s+$/g, "")
        let res = ""
        let post = postData
        try {
        // eval('var post = post || ' + JSON.stringify(postData))
            // res = eval(v)
        } catch {
        }
        return res || ''
    })
    return str
})
const extensions = [html(
    {
        matchClosingTags: true,
        autoCloseTags: true
    }
), oneDark];
const log = console.log


</script>

